<template>
    <div>
        <form class="card comment-form">
            <div class="card-block">
                <textarea class="form-control" placeholder="Write a comment..." rows="3" v-model="comment"></textarea>
            </div>
            <div class="card-footer">
                <img src="http://i.imgur.com/Qr71crq.jpg" class="comment-author-img" />
                <button class="btn btn-sm btn-primary" @click.prevent="addComment">
                    Post Comment
                </button>
            </div>
        </form>

        <div class="card" v-for="comment in comments" :key="comment.id">
            <div class="card-block">
                <p class="card-text">{{ comment.body }}</p>
            </div>
            <div class="card-footer">
                <nuxt-link class="comment-author" :to="{
            name: 'profile',
            params: {
              username: comment.author.username,
            },
          }">
                    <img :src="comment.author.image" class="comment-author-img" />
                </nuxt-link>
                &nbsp;
                <nuxt-link class="comment-author" :to="{
            name: 'profile',
            params: {
              username: comment.author.username,
            },
          }">
                    {{ comment.author.username }}
                </nuxt-link>
                <span class="date-posted">{{
          comment.createdAt | date("MMM DD, YYYY")
        }}</span>
                <span v-if="comment.author.username === user.username" class="mod-options"
                      @click="deleteComment(comment.id)"><i class="ion-trash-a"></i></span>
            </div>
        </div>
    </div>
</template>
<script>
import { getComments, addComments, deleteComments } from '@/api/article'
import { mapState } from 'vuex'

export default {
    name: 'ArticleComments',
    props: {
        article: {
            type: Object,
            required: true
        }
    },
    data() {
        return {
            comments: [], //文章列表
            comment: ''
        }
    },
    async mounted() {
        console.log(111111)
        this.getComments()
    },
    methods: {
        async getComments() {
            const { data } = await getComments(this.article.slug)
            this.comments = data.comments
            console.log(this.comments)
        },
        async addComment() {
            try {
                const { data } = await addComments({
                    slug: this.article.slug,
                    comment: this.comment
                })
                console.log(data)
                this.comment = ''
                this.getComments()
            } catch (error) {
                console.dir(error)
            }
        },
        async deleteComment(id) {
            try {
                await deleteComments({ slug: this.article.slug, id })
                this.getComments()
            } catch (error) {
                console.dir(error)
            }
        }
    },
    computed: {
        ...mapState(['user'])
    }
}
</script>
<style></style>
